1、元素隐藏:display:none
页面结构仍然存在,元素所占的空间会被隐藏
2、元素显示,
display:block 块级元素显示
display:inline 行级元素显示
display:inline-block 行级元素显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
div{background:green;width:200px;height:80px;display:none}
span{background:red}
</style>
</head>
<body>
<div>我要好好学习1</div>
<span>我要好好学习2</span>
</body>
</html>
返回值:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
div{background:green;width:200px;height:80px;display:none}
.one{display:block}
span{background:red}
.two{display:block}
</style>
</head>
<body>
<div class="one">我要好好学习1</div>
<span class="two">我要好好学习2</span>
</body>
</html>
返回值:
div元素可以显示,并且可以设置完高,而span元素也可以显示,而span宽高没有设置变成块级元素,宽高铺满了浏览器。